<template>
<div class="choose-sms-template">
    <el-dialog custom-class="wlm-form-dialog dialog-table" :visible.sync="dialogTableVisible" width="50%">
        <div class="wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">选择短信模板</span>
        </div>
        <div class="wlm-table-content">
            <div class="wlm-dialog-main">
                <div class="flex-row">
                    <el-scrollbar style="width:100%;height: 450px;max-height: 450px;">
                        <div class="goods-list-box">
                            <el-table class="chooseTable" :data="filterTable" :row-style="{cursor:'pointer'}" @row-click="smsRowClick" highlight-current-row style="width: 100%;padding:0 30px;border-bottom:none">
                                <el-table-column prop="date" label=""  width="50">
                                    <template slot-scope="scope">
                                        <el-radio class="display-radio" :disabled="scope.row.is_open==20" v-model="current" @change="currentChange(scope.row)" :label="scope.row.id"></el-radio>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="date" label="模板ID"  min-width="50">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.template_id}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="模板名称"  min-width="40">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.name}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="短信内容"  >
                                    <template slot-scope="scope">
                                        <span>{{scope.row.template_content}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="date" label="状态" >
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.is_open==10">启用</span>
                                        <span v-if="scope.row.is_open==20">禁用</span>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column label="创建时间"  >
                                    <template slot-scope="scope">
                                        <p>{{scope.row.create_time}}</p>
                                    </template>
                                </el-table-column> -->
                            </el-table>
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
        <div class="pagination-content flex-row flex-justify-b flex-align-c">
            <el-row class="pagination-btns">
            </el-row>
            <el-pagination style="margin-top:20px;margin-bottom:20px;margin-right: 25px;" :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData.length > 0 ? tableFormatData.userTable.pagination.total : 0">
            </el-pagination>
        </div>
        <div class="wlm-dialog-fixfooter">
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="toggle">取 消</el-button>
                <el-button size="small" type="primary" @click="saveChoose">确 定</el-button>
            </span>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
  getDataList
} from '@/api/application'
import mixins from '@/mixins/mixins'
import defaultConfig from './utils/config'
export default {
  mixins: [defaultConfig.mixins, mixins.getters('Table')],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  components: {
  },
  watch: {
    'config.wechatFiles': {
      handler(newData, oldData) {
        console.log(newData, oldData)
        if (typeof newData === 'string') {
          console.log(newData, '23123newdata')
          this.$nextTick(() => {
            this.tableFormatData.userTable.files.res = '1'
          })
        }
      },
      immediate: true,
      deep: false
    }
  },
  computed: {
    filterTable() {
      const tableData = this.tableFormatData.userTable.tableData
      const tableDataArr = Object.keys(tableData)
      // const result = []
      if (Array.isArray(tableDataArr)) {
        tableData.map(item => {
          // console.log(item)
        })
      }
      return tableData
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      displayData: [],
      current: '',
      dialogTableVisible: false,
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: getDataList
          },
          tableData: [],
          files: {
            dialog: 1,
            Recycle: '1',
            ids: [],
            res: '0',
            checkall: '0'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    showDialogSet() {
      this.dialogVisibleImg = true
    },
    smsRowClick(row) {
      this.current = row.id
      this.displayData = [row]
      console.log(row.id, 'dd')
      // this.displayData = [{ id: row.id, name: row.name }]
    },
    currentChange(row) {
      this.displayData = [row]
    },

    toggle() {
      this.dialogTableVisible = !this.dialogTableVisible
    },
    saveChoose() {
      this.toggle()
      this.output()
    },
    output() {
      if (Object.prototype.toString.call(this.changeEvt) === '[object Function]') {
        console.log(this.changeEvt, 'this.changeEvt=>')
        this.changeEvt({ displayData: this.displayData, key: 'ChooseSms' }, this.updateConfig.bindKey)
      }
      console.log(this.displayData)
    }
  }
}
</script>

<style lang="scss" scoped>
.choose-sms-template {
    .logo {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
    }

    /deep/ .el-pagination .el-select .el-input {
        width: 100px !important;
    }

    /deep/ .el-pagination .el-pagination__jump .el-input {
        width: auto !important;
    }
    /deep/ .display-radio .el-radio__label{
      display: none;
    }
    // /deep/ .chooseTable .el-table__body tr.current-row>td {
    //     background: #66b1ff !important;
    //     color: #fff;
    // }

    // /deep/ .el-table__body tr:hover>td {
    //     background-color: transparent !important;
    // }

    // /deep/ .el-table .disable-row {
    //     background: #c8c9cc !important;
    //     color: #999;
    // }

}
</style>
